<script setup>
  import TableColumn from './components/TableColumn.vue';
  const attrs = useAttrs();
  const emits = defineEmits(['pageChange']);
  const props = defineProps({
    // 支持Table-column的所有属性
    columns: {
      type: Array,
      default: () => []
    },
    // 所有el-pagination支持的属性
    // pagination的所有事件都不支持,官方文档明确说明在以后的版本会被删除
    // 不支持slots(有需要的时候再实现)
    pagination: {
      type: Object,
      default: () => {}
    },
    // 是否显示多选
    showSelection: {
      type: Boolean,
      default: true
    },
    // 是否显示序号列
    showIndex: {
      type: Boolean,
      default: true
    }
  });
  const tableRef = ref();
  const _columns = computed(() => {
    const columns = [...props.columns];
    props.showIndex && columns.unshift({ type: 'index', label: '序号', width: '60' });
    props.showSelection && columns.unshift({ type: 'selection' });
    return columns;
  });
  function handleCurrentChange(value) {
    emits('pageChange', value, props.pagination['page-size']);
  }
  function handlePageSizeChange(value) {
    emits('pageChange', 1, value);
  }
  // 选中的行
  const selection = computed(() => {
    return tableRef.value.getSelectionRows();
  });
  defineExpose({
    tableRef,
    selection
  });
</script>

<template>
  <div class="flex flex-col justify-between h-full">
    <NstdBizTable
      height="100%"
      class="flex-1 min-h-0 nc_cmn_el_table"
      ref="tableRef"
      v-bind="attrs"
      tooltip-effect="light"
    >
      <template v-for="column in _columns" :key="column.label">
        <NstdTableColumn
          v-if="column.type === 'selection' || column.type === 'index'"
          :align="column?.align ? column.align : 'center'"
          :type="column.type"
          :resizable="false"
          v-bind="column"
          fixed
        />
        <TableColumn v-else :column="column">
          <template #default="{ slotName, row, index }">
            <slot :name="slotName" :row="row" :index="index"></slot>
          </template>
          <template #customHeader="scope">
            <slot :name="scope.slotName" :column="scope.column" :index="scope.index"></slot>
          </template>
        </TableColumn>
      </template>
    </NstdBizTable>
    <div class="flex justify-end h-40px" v-if="pagination">
      <NstdPagination
        layout="total, sizes, prev, pager, next, jumper"
        @update:current-page="handleCurrentChange"
        @update:page-size="handlePageSizeChange"
        v-bind="pagination"
      />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
